<template>
  <div class="wh-graph-editor-attr" :class="[showSection?'show-attr':'hide-attr']">
    <div class="wh-graph-editor-attr-wraper">
      <div class="wh-graph-editor-attr-wraper-tabs">
        <el-tabs v-model="activeName" class="wh-graph-editor-attr-wraper-tabs-content">
          <el-tab-pane label="样式" name="attrs">
            <div class="wh-graph-editor-attr-wraper-tabs-content-form">
              <el-form v-if="currentCell" label-width="80px" label-suffix=":" :model="currentCell">
                <el-form-item class="wh-graph-editor-attr-wraper-item" label="填充颜色">
                  <el-color-picker size="mini" v-model="currentCell.body.fill"></el-color-picker>
                </el-form-item>
                <el-form-item class="wh-graph-editor-attr-wraper-item" label="边框颜色">
                  <el-color-picker size="mini" v-model="currentCell.body.stroke"></el-color-picker>
                </el-form-item>
                <el-form-item class="wh-graph-editor-attr-wraper-item" label="边框宽度">
                  <!-- <el-slider size="mini" :max="10" v-model="currentCell.body.strokeWidth"></el-slider> -->
                  <el-input-number size="mini" v-model="currentCell.body.strokeWidth" :min="1" :step="1" step-strictly label="网格大小"></el-input-number>
                </el-form-item>

                <el-form-item class="wh-graph-editor-attr-wraper-item" label="文本内容">
                  <el-input size="mini" v-model="currentCell.text.text" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item class="wh-graph-editor-attr-wraper-item" label="水平位置">
                  <el-slider size="mini" :max="1" :step="0.01" v-model="currentCell.text.refX"></el-slider>
                </el-form-item>
                <el-form-item class="wh-graph-editor-attr-wraper-item" label="垂直位置">
                  <el-slider size="mini" :max="1" :step="0.01" v-model="currentCell.text.refY"></el-slider>
                </el-form-item>
                <el-form-item class="wh-graph-editor-attr-wraper-item" label="水平方式">
                  <el-select v-model="currentCell.text.textAnchor" size="mini" placeholder="请选择">
                    <el-option label="左" value="left"></el-option>
                    <el-option label="中" value="middle"></el-option>
                    <el-option label="右" value="right"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="wh-graph-editor-attr-wraper-item" label="垂直方式">
                  <el-select v-model="currentCell.text.textVerticalAnchor" size="mini" placeholder="请选择">
                    <el-option label="上" value="top"></el-option>
                    <el-option label="中" value="middle"></el-option>
                    <el-option label="下" value="bottom"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="wh-graph-editor-attr-wraper-item" label="文本颜色">
                  <el-color-picker size="mini" v-model="currentCell.text.fill"></el-color-picker>
                </el-form-item>
                <el-form-item class="wh-graph-editor-attr-wraper-item" label="文本大小">
                  <el-input-number size="mini" v-model="currentCell.text.fontSize" :min="1" :step="1" step-strictly label="网格大小"></el-input-number>
                </el-form-item>

              </el-form>
              <el-form v-else label-width="80px" label-suffix=":" :model="grid">
                <el-form-item class="wh-graph-editor-attr-wraper-item" label="显示网格">
                  <el-checkbox size="mini" v-model="grid.visible"></el-checkbox>
                </el-form-item>
                <el-form-item class="wh-graph-editor-attr-wraper-item" label="网格类型">
                  <el-select v-model="grid.type" size="mini" placeholder="请选择">
                    <el-option label="点" value="dot"></el-option>
                    <el-option label="固定点" value="fixedDot"></el-option>
                    <el-option label="线" value="mesh"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="wh-graph-editor-attr-wraper-item" label="网格大小">
                  <el-input-number size="mini" v-model="grid.size" :min="1" :step="1" step-strictly label="网格大小"></el-input-number>
                </el-form-item>
                <el-form-item class="wh-graph-editor-attr-wraper-item" label="网格颜色">
                  <el-color-picker size="mini" v-model="grid.args.color"></el-color-picker>
                </el-form-item>
                <el-form-item class="wh-graph-editor-attr-wraper-item" label="网格宽度">
                  <el-slider size="mini" :max="10" v-model="grid.args.thickness"></el-slider>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane label="数据" name="data">

          </el-tab-pane>
        </el-tabs>


      </div>

      <div class="wh-graph-editor-attr-wraper-mini" id="minimap"></div>
    </div>
    <div class="wh-graph-editor-attr-toggle" @click="onClickToggle()">
      <i class="el-icon-arrow-right" v-show="showSection"></i>
      <i class="el-icon-arrow-left" v-show="!showSection"></i>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    currentCell: {
      type: Object,
      default: null
    },
    grid: {
      type: Object,
      default: null
    }
  },
  watch: {
    grid: {
      handler (newValue, oldValue) {
        if (newValue) {
          this.$emit('changeGrid', newValue)
        }
      },
      deep: true
    },
    currentCell: {
      handler (newValue, oldValue) {
        if (newValue) {
          this.$emit('changeCell', newValue)
        }
      },
      deep: true
    }
  },
  data() {
    return {
      showSection: true,
      activeName: 'attrs'
    }
  },
  methods: {
    onClickToggle() {
      this.showSection = !this.showSection
      this.$emit('toggleSection', 2)
    }
  },
}
</script>

<style scoped lang="scss">
  .wh-graph-editor-attr {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 280px;
    height: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    &-wraper {
      width: 250px;
      height: 100%;
      background: #F5F5F5;
      border-left: 1px solid lightgray;
      box-sizing: border-box;
      padding: 10px;
      box-sizing: border-box;
      position: relative;
      &-tabs {
        height: calc(100% - 200px);
        &-content {
          width: 100%;
          height: 100%;
          ::v-deep .el-tabs__content {
            width: 100%;
            height: calc(100% - 55px);
            overflow-y: auto;
          }
          &-form {
            width: 100%;
            

          }
        }
        .wh-graph-editor-attr-wraper-item {
          margin-bottom: 0;
        }
      }
      &-mini {
        width: 100%;
        height: 200px;
        position: absolute;
        left: 0;
        bottom: 0;
        overflow: hidden;
      }
    }
    &-toggle {
      width: 30px;
      height: 60px;
      border: 1px solid lightgray;
      border-right: none;
      box-sizing: border-box;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      background: #F5F5F5;
    }
  }
  .show-attr {
    right: 0;
    transition: right 800ms ease-in-out;
  }
  .hide-attr {
    right: -250px;
    transition: right 800ms ease-in-out;
  }
</style>
